<template>
  <div class="form-wrapper cp-container">
    <div class="material-textfield green cp-width" :class="{'validate-err': errors.has('原始密码')}">
      <input type="password" required v-model="oldps" v-validate="'required|password'" name="原始密码"/>
      <label data-content="原始密码*"></label>
    </div>

    <div class="material-textfield green cp-width" :class="{'validate-err': errors.has('新密码')}">
       <input type="password" required v-model="newps" v-validate="'required|password'" name="新密码"/>
       <label data-content="新密码*"></label>
    </div>
    <div class="material-textfield green cp-width" :class="{'validate-err': errors.has('确认新密码')}">
       <input type="password" required v-model="renewps" v-validate="'required|repassword:' + newps" name="确认新密码"/>
       <label data-content="确认新密码*"></label>
    </div>

    <div class="">
      <el-button type="success width-min-200" round @click="confirm()">
        <span>提交修改</span>
      </el-button>
    </div>
  </div>

</template>

<script>
import axios from 'axios'


  export default {
    title: '修改密码',
    name: 'change-password',
    data () {
      return {
        oldps: '',
        newps: '',
        renewps: ''
      }
    },
    methods: {
      confirm () {
        if (this.oldps === this.newps) {
          this.$message({
            message: '输入的新密码与原始密码相同',
            type: 'warning'
          })
          return
        }
        this.$validator.validate().then(result => {
          if (result) {
            let obj = {
              userId: this.$store.state.user.user.user.userId,
              oldPassword: this.oldps,
              newPassword: this.newps
            }
            axios.post('/mscs/user/modPassword', this.$paramsConvert(obj)).then((res) => {
              if (res.data.code === 1) {
                this.$message({
                  message: '修改密码成功',
                  type: 'success'
                })
                this.oldps = ''
                this.newps = ''
                this.renewps = ''
                this.$validator.reset()
              } else {
                this.$codeError(res)
              }
            }).catch((error) => {
              this.$catchError(error)
            })
          } else {
            this.$message({
              showClose: true,
              message: this.$connErmsg(this.$validator.errors.items),
              type: 'error'
            })
          }
        })
      },
      validate () {
        return this.$validator.validateAll()
      }
    }
  }
</script>
<style >
  .cp-container {
    padding-top: 60px;
  }
  .cp-container .el-upload-dragger {
    width: 420px;
  }
  .bus-lin {
    width: 420px;
  }
  .bus-lin > label {
    color: #666666;
  }
  .bus-lin .upload-demo {
    margin: 10px 0 45px 0;
  }
  .cp-width {
    width: 420px;
  }
  .cp-container .el-dialog__body {
    overflow: auto;
  }
</style>
